import { Tabs, Tab } from "@nextui-org/react";
import { useNavigate } from "react-router-dom";
export default function BottomNav() { 
  const navList = [
    { label: 'Header', url: '/header',key:'header' },
    { label: 'Foot', url: '/foot/ddd',key:'foot' },
    { label: 'Condition', url: '/condition' ,key:''},
    { label: 'Render List', url: '/list/231122/cake?time=656951125545',key:'renderList' },
    { label: 'Pure Fun', url: '/pure' ,key:'pureFun'},
    { label: 'Action Index', url: '/action/index',key:'actionIndex' },
    { label: 'State Index', url: '/state/index',key:'stateIndex' },
    { label: 'State Input', url: '/state/input',key:'stateInput' },
    { label: 'State Chat', url: '/state/chat',key:'stateChat' },
    { label: 'Share', url: '/Share' ,key:'share'},
    { label: '即时通讯', url: '/qq',key:'qq' },
    { label: 'Share=2', url: '/Share', key: 'share2' },
    { label: 'Modal', url: '/modal', key: 'modal' },
    {label: 'useEffect', url: '/useEffect', key: 'UseEffect' }

    
  ]

  const navigate = useNavigate();

  function changeTabs(key) { 
    console.log(key, '1')
    let target = navList.find(v => v.key === key)
    console.log(target, '11')
   
    navigate(target.url)
    //navigate(target.url, {replace:true})
  }
  
  return (
    <>
      <Tabs color="warning" aria-label="Tabs colors" radius="full" fullWidth={true} size="sm" className="myTabs" onSelectionChange={ changeTabs }>
        {navList && navList.map(v => (
          <Tab key={v.key} title={ v.label} />
        )) }
      </Tabs>
    </>
  )
}

